<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElAvatar, ElTooltip } from 'element-plus';
import lodash from 'lodash';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore, useUserStore } from '@/stores';
import { clearToken } from '@/utils/auth';
import defaultAvatar from '../../assets/images/img/默认头像.png';
import PersonalCenterIndex from '../module-personal-center/index.vue';

const router = useRouter();
const userStore = useUserStore();
const systemStore = useSystemStore();

const menuTabChecked = ref();
const menuItemChecked = ref();
const menuList = ref([]);
const menuListIndex = ref({});
const flag = ref(false);

const avatarURL = computed(() => {
  return !userStore?.userInfo?.avatar ? defaultAvatar : userStore?.userInfo?.avatar;
});

const launchMenus = computed(() => {
  return systemStore.launchMenus;
});

watch(systemStore.launchMenus, () => {
  hasPermission();
});

onMounted(() => {
  hasPermission();
});

// 权限处理
const hasPermission = () => {
  menuList.value = launchMenus?.value
    .map((item) => {
      if (userStore?.businessMap[item.menuTitle]) {
        let _item = lodash.cloneDeep(item);

        return handlePermission(_item);
      }
    })
    .filter((value) => value !== undefined);

  menuTabChecked.value = menuList?.value[0];
  menuItemChecked.value = menuList?.value[0]?.menuTabItems?.length
    ? menuList?.value[0]?.menuTabItems[0]
    : menuList?.value[0];
  flag.value = true;

  menuListIndex.value = separateByIndex(menuList.value);
};

const separateByIndex = (arr) => {
  let evenIndexElements = []; //偶数
  let oddIndexElements = []; //基数

  for (let i = 0; i < arr.length; i++) {
    if (i % 2 === 0) {
      evenIndexElements.push(arr[i]);
    } else {
      oddIndexElements.push(arr[i]);
    }
  }

  return {
    evenIndexElements,
    oddIndexElements,
  };
};

// 递归处理权限
const handlePermission = (menu) => {
  if (menu.menuItems) {
    menu.menuItems = menu.menuItems.map((item) => {
      if (userStore?.businessMap[item.menuTitle]) {
        handlePermission(item);

        return item;
      }
    }); // 递归处理子菜单
    menu.menuItems = menu.menuItems.filter((value) => value !== undefined); // 过滤掉没有权限的子菜单
  }

  if (menu.menuTabItems) {
    menu.menuTabItems = menu.menuTabItems.map((item) => {
      if (userStore?.businessMap[item.menuTitle]) {
        handlePermission(item);

        return item;
      }
    }); // 递归处理子菜单
    menu.menuTabItems = menu.menuTabItems.filter((value) => value !== undefined); // 过滤掉没有权限的子菜单
  }

  return menu;
};

// 路由跳转
const goTo = (val) => {
  clearToken();
  router.replace(val);
};

const handleBaseSystem = () => {
  router.replace('/base-menu');
};

const handleMenu = (item) => {
  flag.value = false;

  menuTabChecked.value = item;

  if (item?.menuTabItems?.length) {
    menuItemChecked.value = item?.menuTabItems[0];
  } else {
    menuItemChecked.value = item;
  }

  setTimeout(() => {
    flag.value = true;
  }, 100);
};

const handleMenuTab = (item) => {
  flag.value = false;

  menuItemChecked.value = item;
  setTimeout(() => {
    flag.value = true;
  }, 100);
};

const handlePersonalCenter = () => {
  systemStore.SET_PERSONAL_SHOW(true);
};

const handleMenuTabRoute = (item) => {
  if (['无', '内部'].includes(item?.route)) {
    router.push({
      path: item?.menuPath,
      query: {
        code: item?.code,
      },
    });
  } else {
    var url = item?.menuPath;

    var param = '综合平台';
    var param1 = '综合平台';
    var type = item.menuTitle;

    url +=
      '?param=' +
      encodeURIComponent(param) +
      '&type=' +
      encodeURIComponent(type) +
      '&param1=' +
      encodeURIComponent(param1);

    window.open(url, '_blank');
  }
};
</script>
<template>
  <div class="launch-root">
    <div class="launch-header">
      <div class="launch-header-content">
        <p data-text="林业综合管理平台">林业综合管理平台</p>
      </div>
      <div class="absolute right-20px top-20px flex justify-end">
        <ElTooltip :content="'系统管理'" placement="bottom">
          <SvgIconIndex
            icon-class="system"
            size="35px"
            class="cursor-pointer"
            title="系统管理"
            color="#DCEAFF"
            @click="handleBaseSystem"
          />
        </ElTooltip>
        <ElTooltip :content="'系统退出'" placement="bottom">
          <SvgIconIndex
            icon-class="exit"
            size="30px"
            class="ml-20px mr-20px cursor-pointer"
            title="系统退出"
            color="#DCEAFF"
            @click="goTo('/login')"
          />
        </ElTooltip>
        <ElTooltip :content="userStore?.userInfo?.username" placement="bottom">
          <ElAvatar
            :size="30"
            :src="avatarURL"
            @click="
              () => {
                handlePersonalCenter();
              }
            "
          />
        </ElTooltip>
      </div>
    </div>
    <div class="launch-menu-left absolute left-83.73px top-183.13px w-367px">
      <div class="relative">
        <div
          v-for="(item, index) in menuListIndex?.evenIndexElements"
          :key="index"
          class="launch-menu-left-item"
          :class="{ leftActive: menuTabChecked?.menuTitle === item?.menuTitle }"
          @click="handleMenu(item)"
        >
          <SvgIconIndex
            :icon-class="item?.icon"
            size="30px"
            class="ml-43px cursor-pointer"
            :color="menuTabChecked?.menuTitle === item?.menuTitle ? '#ffffff' : '#ABDCFF'"
          />
          <p>{{ item.menuTitle }}</p>
        </div>
      </div>
    </div>
    <div v-if="menuTabChecked?.menuTabItems?.length" class="launch-menu-tab-items">
      <div
        v-for="(item, index) in menuTabChecked?.menuTabItems"
        :key="index"
        class="grid-li"
        :class="{ activeGrid: menuItemChecked?.menuTitle === item?.menuTitle }"
        @click="handleMenuTab(item)"
      >
        <p>
          {{ item.menuTitle }}
        </p>
      </div>
    </div>
    <Transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      <div v-if="flag" class="launch-menu-items flex items-center justify-between">
        <div
          v-for="(item, index) in menuItemChecked?.menuItems"
          :key="index"
          class="topic-card"
          @click="handleMenuTabRoute(item)"
        >
          <div class="inside h-100% flex items-end justify-center">
            <p>{{ item?.menuTitle }}</p>
          </div>
        </div>
      </div>
    </Transition>

    <div class="launch-menu-right absolute right-91.96px top-217.87px w-367px">
      <div class="relative">
        <div
          v-for="(item, index) in menuListIndex?.oddIndexElements"
          :key="index"
          class="launch-menu-right-item"
          :class="{ rightActive: menuTabChecked?.menuTitle === item?.menuTitle }"
          @click="handleMenu(item)"
        >
          <p>{{ item.menuTitle }}</p>
          <SvgIconIndex
            :icon-class="item?.icon"
            size="30px"
            class="mr-43px cursor-pointer"
            :color="menuTabChecked?.menuTitle === item?.menuTitle ? '#ffffff' : '#ABDCFF'"
          />
        </div>
      </div>
    </div>
    <!-- 个人中心 -->
    <PersonalCenterIndex />
  </div>
</template>

<style scoped lang="scss">
.launch-root {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #19245a;
  background-image: url('../../assets/images/img/背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .launch-header {
    height: 124px;
    margin: 0 197px;

    .launch-header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-image: url('../../assets/images/img/导航背景.png');
      background-size: 100% 100%;
      p {
        position: relative;
        bottom: 25px;
        display: inline-block;
        color: transparent;
        font-size: 42px;
        font-family: $font-family-CN-WenDao;
        letter-spacing: 8px;
        white-space: nowrap;
        background: linear-gradient(180deg, #ffffff, #b3d9eb);
        background-size: cover;
        background-clip: text;
      }
    }
  }

  .launch-menu-left {
    .launch-menu-left-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 310px;
      height: 90px;
      margin-bottom: 47.87px;
      color: #abdcff;
      font-size: 20px;
      font-family: WDCH, WDCH-Regular;
      background-image: url('../../assets/images/img/一级未选中.png');
      background-size: 100% 100%;
      cursor: pointer;
      transition: transform 0.5s ease;
      p {
        width: 125px;
        margin-left: 18px;
        white-space: wrap;
      }

      &:nth-child(2) {
        transform: rotate(0deg) translateX(50px) rotate(0deg);
      }

      &:nth-child(3) {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
      }
      &:nth-child(4) {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
      }
      &:nth-child(5) {
        transform: rotate(0deg) translateX(50px) rotate(0deg);
      }
    }
    .leftActive {
      color: #ffffff;
      background-image: url('../../assets/images/img/一级选中.png');
    }
  }
  .launch-menu-tab-items {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 55px;

    .grid-li {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 190px;
      max-width: 290px;
      height: 72px;
      margin: 0 20px;
      padding: 0px 40px;
      color: #abdcff;
      font-size: 20px;
      font-family: WDCH, WDCH-Regular;
      letter-spacing: 1px;
      background-image: url('../../assets/images/img/二级未选中.png');
      background-size: 100% 100%;
      cursor: pointer;
      &:hover {
        color: #ffffff;
        background-image: url('../../assets/images/img/二级选中.png');
      }

      p {
        position: relative;
        bottom: 3px;
      }
    }
    .activeGrid {
      color: #ffffff;
      background-image: url('../../assets/images/img/二级选中.png');
    }
  }
  .launch-menu-items {
    position: fixed;
    top: 25%;
    left: 37%;
    width: 561.02px;
    height: 616px;
    .topic-card {
      width: 236px;
      height: 316px;
      padding: 0 12px;
      background-size: 100% 100%;
      cursor: pointer;
      .inside {
        position: relative;
        bottom: 10px;
        color: transparent;
        font-size: 32px;
        font-family: WDCH, WDCH-Regular;
        white-space: wrap;
        text-align: center;
        background: linear-gradient(180deg, #ffffff, #c9e9ff);
        background-size: cover;
        background-clip: text;
      }

      &:first-child {
        background-image: url('../../assets/images/img/业务管理.png');
      }
      &:nth-child(2) {
        background-image: url('../../assets/images/img/可视化大屏.png');
      }
    }
  }
  .launch-menu-right {
    .launch-menu-right-item {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 310px;
      height: 90px;
      margin-bottom: 57px;
      color: #abdcff;
      font-size: 20px;
      font-family: WDCH, WDCH-Regular;
      background-image: url('../../assets/images/img/未选中1.png');
      background-size: 100% 100%;
      cursor: pointer;
      transition: transform 0.5s ease;
      p {
        width: 125px;
        margin-right: 18px;
        white-space: wrap;
        text-align: right;
      }
      &:nth-child(2) {
        transform: rotate(0deg) translateX(-50px) rotate(0deg);
      }
      &:nth-child(3) {
        transform: rotate(0deg) translateX(-80px) rotate(0deg);
      }

      &:nth-child(4) {
        transform: rotate(0deg) translateX(-50px) rotate(0deg);
      }
    }
    .rightActive {
      color: #ffffff;
      background-image: url('../../assets/images/img/选中1.png');
    }
  }
}
</style>
